<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <script src="./js/axios.min.js"></script>
    <link rel="stylesheet" href="./css/login.css" />
  </head>
  <style>
    .bo1 {
      width: 500px;
      height: 1250px;
      background-image: url(./png/A5S0D.png);
      background-repeat: no-repeat;
      position: absolute;
      top: 600px;
      left: 100px;
      transform: rotateZ(2deg);
      filter: drop-shadow(1px 6px 20px #000);
      z-index: 9;
      animation: dac 5s linear infinite;
    }
    @keyframes dac {
      0% {
        top: 500px;
        left: 100px;
      }
      100% {
        top: -1300px;
        left: 100px;
      }
    }
  </style>
  <body>
    <div class="bo1"></div>
    <div class="box1">
      <div class="box2"></div>
      <div class="box3">
        <h1>登录</h1>
        <p>账号：<input type="text" /></p>
        <p>密码：<input type="password" /></p>
        <p><input type="button" value="登录" /></p>
        <p><a href="lbjn.html">没有账号？去注册</a></p>
      </div>
    </div>
    <script>
      //1-给注册按钮添加事件
      let ipts = document.querySelectorAll("input");
      ipts[2].onclick = function () {
        let uname = ipts[0].value;
        let pd = ipts[1].value;
        //2-请求
        let loginAPI = "http://jx.xuzhixiang.top/ap/api/login.php";
        axios
          .get(loginAPI, { params: { username: uname, password: pd } })
          .then((r) => {
            console.log(r.data);
            alert(r.data.msg);
            if (r.data.code == 1) {
              let { id, token, username } = r.data.data;
              localStorage.setItem("id", id);
              localStorage.setItem("token", token);
              localStorage.setItem("username", username);
              location.href = "home.html";
            }
          });
      };
    </script>
  </body>
</html>
